<template>
  <van-nav-bar
  fixed
  placeholder
  :title="$t('message.player')"
  />
  <main>
    <van-cell-group>
      <van-cell v-for="item in playerStore.playerList" :key="item" :title="item" />
    </van-cell-group>
  </main>
  <van-floating-bubble 
    icon="plus" 
    axis="xy"
    magnetic="x"
    @click="onClick" />
  <van-dialog v-model:show="showAddDialog" :title="$t('message.addPlayer')" show-cancel-button :before-close="onDialogClose">
    <van-field v-model="inputName" :placeholder="$t('message.enterPlayerName')" />
  </van-dialog>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { usePlayerStore } from '../stores/players'
  import { useI18n } from "vue-i18n"

  const {t} = useI18n()

  const showAddDialog = ref(false)
  const inputName = ref("")
  const playerStore = usePlayerStore()

  function onClick() {
    inputName.value = "";
    showAddDialog.value = true;
  };
  
  function onDialogClose(action) {
    console.log(action);
    if(action == 'confirm')
    {
      
      inputName.value = inputName.value.trim();
      if(playerStore.playerList.includes(inputName.value))
      {
        showToast(t('message.playerNameExists'));
        return false;
      }
      else
      {
        if(inputName.value == ""){
          return true;
        }
        playerStore.playerList.push(inputName.value);
      }
      return true;
    }
    return true;
  }

</script>

<style scoped>
</style>
